import { useRef } from 'react'
import './index.css'

/* 
头部组件
*/
export default function Header({addTodo}) {
  // 创建一个保存input标签的容器
  const inputRef = useRef()
  /* 
  点击回车键, 调用addTodo添加一个todo

  完成一个功能代码需要做好几步, 是否需要从上向下一步一步想出来 => 一般不会这样
  而做确定的关键步骤(很可能在中间位置), 如果需要条件, 再前面代码, 如果需要收尾, 在后面加代码
  */
  const handleKeyUp = (e) => {
    // 判断是回车键才处理
    if (e.keyCode!==13) { // 如果不是回车, 直接结束
      return
    }
    // 得到input
    // const input = inputRef.current
    const input = e.target
    // 读取输入的文本title
    const title = input.value.trim() // 去掉两侧的空格
    
    // 如果没有输入, 或输入的是空格, 都不添加
    if (title==='') {
      input.value = '' // 去除输入框中可能有的空格
      return
    }

    // 调用 addTodo, 向父组件传入title, 添加一个todo
    addTodo(title)
    // 清除输入
    input.value = ''
  }

  return (
    <div className="todo-header">
      <input ref={inputRef} onKeyUp={handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  )
}

// 手动读取input的输入数据 => 非受控组件
// 实时自动收集输入数据到state中 => 受控组件